/* (2018-06-14) adapted from styleTrafficSimulationDe.css
for routing game
*/


/*#############################################################*/
/* basic settings for all aspect ratios */
/*#############################################################*/


body{
  margin: 0;
  padding: 0;
  font-family: 'helvetica', sans-serif;
                 /*font-size: 14px;*/
  font-size: 2vmin;
  text-align: center;
  color: #404050;   /* text color */
  background-color: #FFFFFF;
}


/* <h2>, <h3> not used in the main sim page but in some help pages */

 h1{
     font-family: helvetica, sans-serif;
     font-size: 2.6vmin;
     font-weight: bold;
     color: #446;
     padding-top:0px;
 }

 h2{
     font-family: helvetica, sans-serif;
     font-size: 2.4vmin;
     font-weight: bold;
     color: #446;
     padding-top:0px;
 }

 h3{ 
     font-family: sans-serif;
     font-size: 2.2vmin; 
     font-weight: bold;
     font-style: italic;
     color: #446;
     padding-top:0px;
 }

button{
     font-size: 2.2vmin; 
}

 #gameSliderTitle{
     font-size: 2.5vmin; 
     font-weight: bold; 
     color: #dd0033;
 }
 
/* standard: white */

#container{
    margin: 0em auto;
    width: 98vw;
    text-align: left;
    background-color: #FFFFFF;
}

/* suppresses borders on images used as links */

img {
    border-width: 0;
}


/* general links */

a {
	color: #07A;
	font-weight: normal;
 }

a:link {
	color: #07A;
	text-decoration: none;
}

a:visited {
	color: #957;
	text-decoration: none;
}

a:active {
	text-decoration: underline;
	background-color: #F80;
}

a:hover {
	text-decoration: underline;
	color: #07A;
}


th{                    /* only used in infotext */
  font-size: 2.2vmin;
  font-weight: bold; 
  color: #404060;      /* text color */

}

td{
  font-size:1.8vmin; 
  font-weight: bold; 
  color: #000000;   /* only WITHOUT quotes here, not "#404060" etc */
}

td.important{
  font-size:1.8vmin; 
  font-weight: bold; 
  color: #dd0033;
}

table.infoTable {
   border: 0px ridge rgb(130,130,130); /* spacing, padding DOS with border-collapse */
   border-collapse: collapse; 
   background-color: rgba(255,255,255,0.7);
}
table.infoTable td {
   border: 2px ridge rgb(130,130,130);
}

ul { margin-left: 2vmin; padding: 0vmin; }

ul.noindent {   /* then in html <ul class="noindent">...</ul>*/
    margin-left: 5px;
    margin-right: 0px;
    padding-left: 10px;
    padding-right: 0px;
}


/*#############################################################*/
/* basic settings for landscape formats */
/*#############################################################*/

@media all and  (min-aspect-ratio: 8/5){




/* (2) landscape: the simulation canvas ((1) header not relevant) */

#contents{ /*landscape*/
  position: absolute;
  left:   0vw;
  top:   0vmin;
  width:  99vw;  /* 6/5 */
  height: 99vh;
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 1;
}


/* (2a) landscape: square play button  */

#gameDiv{ /*landscape*/
  position: absolute;
  top: 20vmin;
  height: 7vmin;
  left: 41vmin;
  width: 28vmin;
  font-size: 2.2vmin; 
  z-index: 2; /* the higher the integer, the more on top */
}

/* (2b) landscape: position of the start/stop button */

#startStopDiv{ 
  position: absolute;
  top: 18vmin;
  left: 70vmin;
  height: 8vmin;
  width: 8vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

/* (2c) landscape: position of the restart button */

#restartDiv{
  position: absolute;
  top: 18vmin;
  left: 80vmin;
  height: 8vmin;
  width: 8vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

/* (2d) landscape: infotext (layout of ul's  in top-level ul, ul.noindent)*/

#infotextGame{ 
  position: absolute;
  border:1px solid black;
  top: 27vmin;
  left: 41vmin;
  width: 49vmin;
  height: 40vmin;
  text-align: left;
  padding-top: 0vmin;
  padding-left: 2vmin;
  padding-right: 2vmin;
  background-color: rgba(255,255,255,1.0);
  overflow:auto;  
  z-index: 2; 

}


/* (3a) landscape: main player's slider for deviation uses
/* Notice: table elements relevant for font size */


#sliderMain{
  position: absolute;
  top: 18vmin;
  height: 9vmin;
  left: 101vmin;
  width: 55vmin;
  background-color: rgba(255,255,255,1);
  z-index: 2; /* the higher the integer, the more on top */
}


/* (3b) landscape: secondary sliders info inflow, timewarp */

#sliders2{
  position: absolute;
  top: 72vmin;
  height: 8vmin;
  left: 101vmin;
  width: 55vmin;
  background-color: rgba(255,255,255,0.5);
  z-index: 2; /* the higher the integer, the more on top */
}





/* (4a) landscape: position of the copyright: left bottom of simCanvas*/

#impressum{ 
  position: absolute;
  top: 97%;  /* bottom: bug in Safari */
  left: 0.5vw;
  height: 2vmin;
  width: 10vw;
  background-color: rgba(255,255,255,0.7);
  font-size: 1.5vmin;
  z-index: 2; /* the higher the integer, the more on top */
}



/* (4b) landscape: pos of the general link list (table.infoTable top-level)*/

#linkDiv{ 
  position: absolute;
  top: 95.5%;  /* bottom: bug in Safari */
  left:   74vmin;
  z-index: 2;
} 


/* (4c) landscape: position of the flags: right top of simCanvas */

#infoFlags{
  position: absolute;
  top:   94.5%;
  right:   2vmin;
  width:  16vmin; /* no height */
  z-index: 2;
}




} /* end @media filter landscape normal */




/*#############################################################*/
/* basic settings for square/portrait formats */
/*#############################################################*/

@media all and  (max-aspect-ratio: 8/5){


/* (2) portrait: the simulation canvas ((1) header not relevant) */


#contents{ 
  position: absolute;
  left:   0vw;
  top:   0vmin;
  width:  99vw; 
  height: 60vw;
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 1;
}


/* (2a) portrait: square play button  */

#gameDiv{ 
  position: absolute;
  top: 22vw;
  left: 34vw;
  height: 6vmin;
  width: 24vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

/* (2b) portrait: position of the start/stop button */

#startStopDiv{ /*portrait*/
  position: absolute;
  top: 22vw;
  left: 58vw;
  height: 8vmin;
  width: 8vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

/* (2c) portrait: position of the restart button */

#restartDiv{ 
  position: absolute;
  top: 22vw;
  left: 67vw;
  height: 8vmin;
  width: 8vmin;
  z-index: 2; /* must repeat! */
}

/* (2d) portrait: infotext (layout of ul's  in top-level ul, ul.noindent)*/


#infotextGame{ 
  position: absolute;
  border:1px solid black;
  top: 62vw;
  left: 10vw;
  width: 80vw;
  height: 23vw;
  text-align: left;  /* must repeat everything */
  padding-top: 0vmin;
  padding-left: 2vmin;
  padding-right: 2vmin;
  background-color: rgba(255,255,255,1.0);
  z-index: 2; 

}


/* (3a) portrait: main player's slider for deviation uses
/* Notice: table elements relevant for font size */


#sliderMain{
  position: absolute;
  top: 12vw;
  left: 30vw;
  height: 9vmin;
  width: 55vmin;
  background-color: rgba(255,255,255,1);
  z-index: 2; /* the higher the integer, the more on top */
}


/* (3b) portrait: secondary sliders info inflow, timewarp */

#sliders2{
  position: absolute;
  top: 40vw;
  left: 30vw;
  height: 8vmin;
  width: 55vmin;
  background-color: rgba(255,255,255,0.5);
  z-index: 2; /* the higher the integer, the more on top */
}




/* (4a) portrait: position of the copyright: left bottom of simCanvas*/

#impressum{ 
  position: absolute;
  top: 57.5vw;  /* bottom: bug in Safari */
  left: 0.5vw;
  background-color: rgba(255,255,255,0.7);
  font-size: 1.5vmin;
  z-index: 2; /* the higher the integer, the more on top */
}



/* (4b) portrait: pos of the general link list (table.infoTable top-level)*/

#linkDiv{ 
  position: absolute;
  top: 88vw; 
  left:   15vw;
  width:   70vw;
  z-index: 2;
} 


/* (4c) portrait: position of the flags: right top of simCanvas */

#infoFlags{
  position: absolute;
  top:   55vw;
  right:   2vmin;
  width:  16vmin; /* no height */
  z-index: 2;
}





} /* end @media filter square/portrait  */




/*#########################################################*/
/* addl settings hendheld-type devices with small screen */
/*#########################################################*/

@media all and  (min-aspect-ratio: 6/5) and (max-height: 599px){

